<script>
import {Toast} from "vant";

export default {
  name: "WorkOrderBaoXiuView",
  data() {
    return {
      form: {},
      fileList: [],
      image: [],
      formData: {},

      ticketTypeOptions: [
        {text: '维修', value: '1'},
        {text: '维保', value: '2'},
        {text: '巡检', value: '3'},
      ],
      priorityOptions: [
        {text: '普通', value: '1'},
        {text: '紧急', value: '2'},
        {text: '特级', value: '3'},
      ],
      shebeiName: [
        {text: '设备001', value: '设备001'},
        {text: '设备002', value: '设备002'},
        {text: '设备003', value: '设备003'},
      ],
      shebeiAddress: [
        {text: '浙大森林A区3号楼1楼', value: '浙大森林A区3号楼1楼'},
        {text: '浙大森林A区3号楼2楼', value: '浙大森林A区3号楼2楼'},
        {text: '浙大森林A区3号楼3楼', value: '浙大森林A区3号楼3楼'},
      ],
    }
  },
  methods: {
    onBack() {
      this.$router.go(-1);
    },
    qr() {
      // this.form.wxjl = this.wxjl;
      this.form.url = (this.image.split(",")).join(",");
      // console.log(this.list.url)
      this.form.status = 1;
      if (this.form.shebeiName=="设备001"){
        this.form.shebeiId = 1;
        console.log(this.form.shebeiId)
      }
      if (this.form.shebeiName=="设备002"){
        this.form.shebeiId = 2;
      }
      if (this.form.shebeiName=="设备003"){
        this.form.shebeiId = 3;
      }
      this.axios.post(`http://localhost:9999/api-work-order-service/work-order/save`, this.form).then(res => {
        if (res.data.code == 1) {
          Toast.success('处理成功');
          this.$router.go(-1);
        } else {
          Toast.fail('处理失败');
        }
      })
      // this.$router.push({path: '/wo-de'})
    },
    read(file) {
      const files = Array.isArray(file) ? file : [file];
      files.forEach((item) => {
        // 创建 FormData
        const formData = new FormData();
        formData.append('file', item.file);
        // 上传文件到服务器
        this.axios.post('http://localhost:9999/api-work-order-service/oss/upload', formData, {
          headers: {
            // 设置请求头
            'Content-Type': 'multipart/form-data',
          },
        }).then(res => {
          // 初始化 shippingannex 为字符串
          if (!this.formData.shippingannex) {
            this.formData.shippingannex = '';
          }
          // 将文件 URL 添加到字符串中，用逗号分隔
          this.formData.shippingannex = this.formData.shippingannex
              ? this.formData.shippingannex + ',' + res.data
              : res.data;
          this.image = this.formData.shippingannex;
          console.log(this.image);
          console.log("2222" + this.image)
          Toast.success('文件上传成功');
        })
      });
    }
  },
  created() {

  }
}
</script>

<template>
<div>
  <van-nav-bar
      title="报修"
      left-arrow
      @click-left="onBack"
      fixed
  />
  <h3>占位</h3>
  <div style="margin-top: 10px">
    <div>
      <div>
        <span style="margin-left: -30px">报修类别  </span>
        <select id="dispatch - person" style="width: 200px;height: 25px;margin-left: 30px" v-model="form.workOrderType">
          <option v-for="itme in ticketTypeOptions" :value="itme.value">{{ itme.text }}</option>
        </select>
      </div>
      <div style="margin-top: 10px">
        <span style="margin-left: -30px">优 先 级:</span>
        <select id="dispatch - person" style="width: 200px;height: 25px;margin-left: 35px" v-model="form.workOrderPriority">
          <option v-for="itme in priorityOptions" :value="itme.value">{{ itme.text }}</option>
        </select>
      </div>
      <div style="margin-top: 10px">
        <span style="margin-left: -30px">报修设备:</span>
        <select id="dispatch - person" style="width: 200px;height: 25px;margin-left: 35px" v-model="form.shebeiName">
          <option v-for="itme in shebeiName" :value="itme.value">{{ itme.text }}</option>
        </select>
      </div>
<!--      <div style="margin-top: 10px">-->
<!--        <div class="form-container">-->
<!--          <div class="form-item">-->
<!--            <label for="name">上报人</label>-->
<!--            <input type="text" id="name" v-model="form.sbname">-->
<!--          </div>-->
<!--          <div class="form-item">-->
<!--            <label for="phone">联系电话</label>-->
<!--            <input type="text" id="phone" v-model="form.phone">-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
    </div>

    <div style="margin-top: 20px">
      <span style="margin-left: -260px">问题描述</span>
      <div style="border: 1px solid #ccc;width: 90%;height: 190px;margin-left: 20px;margin-top: 10px">
        <span style="margin-top: 10px;margin-left: -270px"></span>
        <div style="margin-top: 10px;margin-left: 10px">
          <van-field
              v-model="form.bz"
              rows="2"
              autosize
              type="textarea"
              maxlength="50"
              placeholder="内容描述"
              border:true
              show-word-limit
              :style="{ border: '1px solid #ccc',width: '95%',}"
          />
        </div>
        <span style="margin-left:-280px ">位置</span>
        <div>
          <select id="dispatch-person" style="width: 300px;height: 25px;" v-model="form.shebeiAddress">
            <option v-for="itme in shebeiAddress" :value="itme.value">{{ itme.text }}</option>
          </select>
        </div>
      </div>
    </div>

    <div style="margin-top: 20px">
      <van-uploader v-model="fileList" :after-read="read" multiple :max-count="6"/>
    </div>

    <div>
      <van-button type="primary" @click="qr" style="background-color: #1989fa;width: 90%;border-radius: 25px"
                  size="large">提交任务
      </van-button>
    </div>

  </div>
</div>
</template>

<style scoped>
.ticket-view {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-top: 46px;
  top: 30px;
}

.form-container {
  width: 300px;
}

.form-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

label {
  width: 80px;
  text-align: right;
  margin-right: 10px;
}

input {
  flex: 1;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
</style>